<template>
 <div class="mark1" :style="positions">
     <div :class="{'hasplus':hasplus}" @click="clickmark">
         <span v-if="hasplus">+</span><span>{{markname}}</span>
         <b v-if="showx">x</b>
     </div>
 </div>
</template>

<script>
 export default {
   name:'mark1',   
   data() {
     return {

     }
   },
   methods:{
       clickmark(e){
           this.$emit('onClickmark',e);
       }
   },
   props:{
       markname:{
           type:String,
           default:'---'
       },
       positions:{
           type:Object
       },
       hasplus:{
           type:Boolean,
           default:false
       },
       showx:{
           type:Boolean,
           default:false
       }
   },
   components: {

   }
 }
</script>

<style scoped lang="scss">
@import "../../styles/common.scss";
.mark1{
    box-sizing: content-box;
    font-size:px2rem(30);
    text-align: center;
    width: px2rem(142);
    height: px2rem(70);
    line-height: px2rem(70);
    margin-right: px2rem(30);
    margin-top: px2rem(30);
    >div{
        width:100%;
        height: 100%;
        background-color: #f1f3f4;
        position: relative;
        b{
            display: block;
            position: absolute;
            line-height: px2rem(40);
            top: px2rem(-17);
            right:px2rem(-17);
            width: px2rem(40);
            height:px2rem(40);
            border-radius: px2rem(40);
            background-color: #999;
            color: #fff;
        }
    }
}
</style>
